<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网</title>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
	<div class="htitle">
    	<a href="#" target="_blank" class="location">衡阳</a>
        <div class="header-info" id="login_info">
            <div class="login-info" v-if="isLogin">
            	<a href="back/manager/user.html" title="个人信息" target="blakn">欢迎您：{{nickName}}</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            <div class="login-info" v-else>
            	<a href="login.html" title="点击登录">您好，请登录</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            
            <div class="person-info">
            	<span>|</span>
            	<a href="front/order.html" target="_blank">我的订单</a>
                <span>|</span>
                <a href="#" target="_blank">我的小吃</a>
                <span>|</span>
                <a href="#" target="_blank">客户服务</a>
                <span>|</span>
           		<a href="#" target="_blank">个人信息</a>
            </div>
        
        </div>
    </div>
    
    <!-- 顶部搜索区域 -->
    <div class="search">
    	<div class="search_left">
    		<a href="index.html" title="首页">
            	<img src="images/logo.png" width="260px" height="120px"/> 
            </a>
        </div>
        
        <div class="search_right">
        	<div class="search_top">
                <div class="search_div">
                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" id='search_gname'/>
                    <input type="button" class="search-btn" @click="search"/>  
                </div>
                <div class="buycart">
                	<i class="iconfont">{{cartCount}}</i>
                    <a href="front/cart.html" target="_blank">我的购物车</a>
                </div>
            </div>

            <!-- 类型渲染 -->
            <div class="search_item" id="search_item">
            	<a href="javascript:void(0)" class="selected" @click="findByTno(0, '')">全部</a>
            	<a href="javascript:void(0)" v-for="(type, index) in types" 
            		@click="findByTno(index + 1, type.tno)" :data-tno="type.tno">{{type.tname}}</a>
            		<!-- vue给标签绑定自定义数据 ： data-tno -->
            </div>
        </div>
    </div>
</header>

<div class="slide">
	<ul class="slide_pics">
        <li><a href="" class=""><img src="images/slide01.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="images/slide02.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="images/slide03.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="images/slide04.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="images/slide05.jpg" alt="幻灯片"></a></li>
    </ul>
    <div class="prev"></div>
    <div class="next"></div>
    <ul class="points"></ul>
</div>

<!-- 商品的渲染 -->
<article id="app">
    <div class="view_title">
    	<a href="" class="view_price price_down">价格</a>
        <input type="number" id="start_price" class="price_ipt" min="1"/>
        <span>-</span>
        <input type="number" id="end_price" class="price_ipt" min="1"/>
    </div>
    
    <div class="view_goods">
    	<ul id="view_goods">
        	<li class="hot_box" v-for="good in goods">
            	<i class="all_i i_t"></i>
				<i class="all_i i_r"></i>
				<i class="all_i i_b"></i>
				<i class="all_i i_l"></i>
                <a :href="'detail.html?'+good.gno + '&' + good.gname" target="_blank" class="hot_warp">
                	<img :src="good.pic" :title="good.gname"/>
                    <span>{{good.gname}}</span>
                </a>
                <div class="view_info">
                	<span class="price">{{good.price}}</span>
                    <span>/{{good.weight}}</span>
                    <span class="buy" @click="addCart(good.gno)">&nbsp;</span>
                </div>
            </li>
        	
        </ul>
    </div>
    
<!--     <div class="page_info">
    	<a href="" class="active">首页</a>
        <a href="" class="active">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">末页</a>
    </div> -->
    <!-- 新增的分页插件 -->
    <div class="pagination" id="pagination"></div>
</article>
<div class="popup_con">
	<div class="popup">
		<p id="popup_info"></p>
	</div>
</div>  
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/slide.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>


<!-- 依次引入相关JS文件 -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<!-- 引入检查登录和类型 购物车 公共js文件 -->
<script type="text/javascript" src="js/base.js"></script> 

<!-- 引入分页js插件 -->
<script type="text/javascript" src="js/showpage.js"></script> 
<script type="text/javascript">
//当前页面数 和 每页显示数
let page = 1;
let rows = 5;

//构建主体 商品内容
let vm = new Vue({
	el:"#app",
	data:{
		goods:[],  //显示的商品信息
		totalPage:1, //总页码数
	},
	mounted(){
		//默认前台第一次查询
		axios.post("goods/findByFirst", qs.stringify({page, rows})).then(result =>{
			if(result.status == 200 && result.data.code == 200){  //请求和响应都是成功
				this.goods = result.data.data.rows;
				this.totalPage = Math.ceil(result.data.data.total / rows)   //向上取整 获得页码数
				//开启分页 先引入showpage.js 调用分页功能 showPage( count) + 分页功能
				$("#pagination").showPage( this.totalPage);
			}
		})
	},
	methods:{
		addCart(gno){  //TODO 加入购物车
			alert("加入购物车成功");
		}
	}
})

//分页查询 使用 showPage.js 中29 行定义的函数
function findByPage(index, obj){  //调用外部 分页查询额方法
	//获取查询条件
	page = index; //要查询的页码数
	let gname = $.trim($("#search_gname").val());
	let tno = $.trim($("#search_item>a[class='selected']").data("tno"));//获取data-tno属性的值 vm属性:data-tno='type.tno'
	let sprice = $.trim($("#start_price").val());  //价格区间
	let eprice = $.trim($("#end_price").val());
	//多条查询请求
	axios.post("goods/finds", qs.stringify({page, rows, gname, tno, sprice, eprice})).then(result =>{
		if(result.status == 200 && result.data.code == 200){  //请求和响应都是成功
			vm.$data.goods = result.data.data; //绑定vue对象中data属性的数据集
		}
	})
}


</script>

<!-- 
<script type="text/javascript">
function addCart() {
	$("#popup_info").text("加入购物车成功...");
	$('.popup_con').fadeIn('fast', function() {
		setTimeout(function(){
			$('.popup_con').fadeOut('fast',function(){
			});	
		}, 2000)
	});
}
 

</script>
-->
</body>
</html>
